<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 结点的优点 -->
    <span>我是span</span>
    <div>我是div</div>
    <ul>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
    </ul>
    <div class="box">
        <span class="erweima">x</span>
    </div>
    <script>
        // 1.利用DOM提供的方法获取元素
        // document.getElementById()
        // document.getElementByTagName()
        // document.querySelector 等
        // 逻辑性不强、繁琐

        // 2.利用结点层级关系获取元素
        // 利用父子结点关系获取元素
        // 逻辑性强、但是兼容性稍差

        // 总结：这两种方法都可以获取元素结点， 我们后面都会使用， 但是节点操作更简单

        // 结点概述：
        // 网页中的所有内容都是结点（ 标签、 属性、 文本、 注释等）。 在DOM中， 结点使用 node 来表示
        // 一般的，结点至少拥有nodeType（结点类型）、nodeName（结点名称）和 nodeValue（结点值）这三个基本属性

        var box = document.querySelector('.box');
        console.dir(box);
        // 元素节点 nodeType 为1
        // 属性节点 nodeType 为2
        // 文本结点 nodeType 为3（文本结点包含文字、空格、换行等）
        // 我们在实际开发中，节点操作主要操作的是 元素节点
    </script>
</body>

</html>